<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all"/>
    <style>

        .wrap{
            width: 200px;
            height: 50px;
            /* border: 1px solid green; */
            margin: 0 auto;
            margin-top: 25px;
            z-index:2;
            position:relative;
            text-align:center;
            line-height:50px;
            background-color: #fff;
            font-size:16px;
        }

        .line{
            width: 800px;
            border: 1px solid #00a1d6;
            position: absolute;
            left: 38%;
            margin-left: -150px;
            top: 257px;
            z-index: -1;
        }
    </style>
</head>
<body>
<div style="margin-left: 40%;width: 200px">
    <img src="../img/registerImg/title.png" height="94" width="335"/>
</div>
<div style="background-color: #00a1d6;height: 30%">
    <img style="margin-left: 500px" src="../img/registerImg/back.png" height="114" width="943"/>
</div>

<div >
    <div class="wrap">
        <h1>注册</h1>
    </div>
    <div class="line"></div>
</div>

<form class="layui-form" action="" style="margin: auto;width: 400px;margin-top: 3%">
    <div class="layui-form-item" style="width: 600px">
        <div class="layui-input-inline">
            <input type="text" id="username" name="username" required  lay-verify="required" style="width: 400px;" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid" style="color: #d32f2f;margin-left: 205px" id="usernameVarify"></div>
    </div>
    <div class="layui-form-item" style="width: 600px">
        <div class="layui-input-inline">
            <input type="text" name="nickname" required  lay-verify="required" style="width: 400px;" placeholder="请输入昵称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="width: 600px">
        <div class="layui-upload">
            <div class="layui-input-inline" style="width: 90px">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="upImg">上传图片</button>
            </div>
            <input type="text" name="faceImage" id="faceImage"  lay-verify="required" style="width: 300px;margin-left: 0px" placeholder="图片名称" autocomplete="off" class="layui-input layui-btn-disabled">
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="displayImg">
                <p id="demoText"></p>
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="width: 600px">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="iphone" id="iphone" placeholder="请输入手机号" style="width: 400px;" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid" style="color: #d32f2f;margin-left: 205px" id="phoneVarify"></div>
        </div>
    </div>
    <div class="layui-form-item" style="width: 600px">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="mobileCode" id="mobileCode" style="width: 305px;" placeholder="请输入短信验证码" autocomplete="off" class="layui-input">
            </div>
            <button type="button" id="codeBtn" style="margin-left: 110px" class="layui-btn layui-btn-normal layui-btn-radius">点击获取</button>
        </div>
    </div>
    <div class="layui-form-item" style="width: 600px">
        <div class="layui-input-inline">
            <input type="password" name="password" id="password" style="width: 400px;" lay-verify="pass" required placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid" style="color: #d32f2f;margin-left: 205px" id="passwordVarify"></div>
    </div>
    <div class="layui-form-item" style="width: 600px">
        <div style="margin-left: 80px;width: 80px" class="layui-input-inline">
            <input type="checkbox" name="agree" id="agree" style="margin-right: 0px" title="我已同意" lay-skin="primary">
        </div>
        <div class="layui-form-mid" style="color: #1E9FFF;" id="agreement">《CiLiCiLi动漫论坛协议》</div>
    </div>
    <div class="layui-form-item" style="width: 600px">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-radius" lay-submit lay-filter="register">立即注册</button>
            <button type="reset" class="layui-btn layui-btn-radius layui-btn-danger">清空表单</button>
        </div>
        <div class="layui-form-mid" style="margin-left: 265px" id="backLogin">
            <a style="color: #1E9FFF;" href="/Anime/home/loginPage">已有账号，直接登录></a>
        </div>
    </div>
</form>

</body>
<script type="text/javascript" src="../layui/layui.js" th:href="@{/layui/layui.js}"></script>
<script type="text/javascript" src="../js/register.js" th:href="@{/js/register.js}"></script>
</html>